<template>
	<view class="scrool-page">
		<u-sticky>
			<view class="flie-header-box">
				<u-search :inputStyle="{	fontFamily: 'PingFang SC'}" :actionStyle="{
		  			background: '#FFFFFF',
		  			width: '180rpx',
		  	        height: '60rpx',
		  			lineHeight: '60rpx',
		  			fontFamily: 'PingFang SC',
		  			borderRadius: '30rpx',
		  		    alignItems: 'center',
		  		    textAlign: 'center'
		  		    }" placeholder="请输入文件名" inputAlign="center" v-model="name" height="70" actionText="查询" @custom="custom">
				</u-search>


			</view>
		</u-sticky>

		<view class="file-list">
			<block v-for="(file, i) in fileList" :key="i">
				<view class="file-item">
					<!-- <view class="item-radio-left" @click="fileSelect(i)">
            <view :class="[file.select==true?'item-radio-active':'item-radio']">
            </view>
          </view> -->
					<view class="file-item-left">

						<image src="../../static/toolSet/pdf.png" class="file-pic"></image>
						<!-- <image :src="file.file_small_logo || defaultPic" class="file-pic"></image> -->
					</view>
					<view class="file-item-right">
						<view class="file-name">{{file.name}}</view>
						<view class="file-info-box">
							<view class="file-createtime">{{file.createTime | dateFormat}}</view>
						</view>
					</view>
					<view class="item-radio-left">
						<view style=" background-color: #3BA2FF;
    
      text-align: center;
      align-items: center;
     width: 80rpx;
	 height: 50rpx;
	 line-height: 50rpx;
      border-radius: 25rpx;

      font-size: 20rpx;
      font-family: PingFang SC;

      color: #FFFFFF;" @click="fileDownLoad(i)">
							查看
						</view>
					</view>
				</view>
			</block>
			<u-divider v-show="pageNum >= totalPages">没有更多了</u-divider>
		</view>
		<!--  <view class="file-bottom">
      <view class="file-bottom-right" @click="fileDownLoad">查看</view>
    </view>
 -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				fileList: [

				],
				// baseUrl: "",
				isAllSelect: true,
				name: "",
				pageNum: 1,
				pageSize: 10,
				totalPages: 0, //总页数
				total: '', //总条数

			};
		},
		filters: {
			//过滤器 用于格式化时间
			dateFormat: function(value) {

				var result = value.slice(0, 10);
				// 返回
				return result;
			},
		},
		onLoad() {
			// this.baseUrl = this.baseUrl;
			this.pageNum = 1;
			this.getWindFiles(this.name);
		},
		methods: {

			/**
			 * 下拉刷新回调函数
			 */
			onPullDownRefresh() {
				console.log("下拉刷新")

				this.pageNum = 1;
				this.getWindFiles(this.name);
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 500);

			},
			/**
			 * 上拉加载更多
			 */
			onReachBottom() {
				console.log("上拉加载更多" + this.pageNum + "  " + this.totalPages)
				if (this.pageNum >= this.totalPages) {
					return
				}

				// 加载更多数据
				this.pageNum++;
				this.getWindFiles(this.name);


			},
			fileSelect(index) {
				for (var i = 0; i < this.fileList.length; i++) {
					if (i != index) {
						this.fileList[i].select = false;
					}
				}
				this.fileList[index].select = !this.fileList[index].select;
			},
			allSelect() {
				this.isAllSelect = !this.isAllSelect;
				for (var i = 0; i < this.fileList.length; i++) {
					this.fileList[i].select = this.isAllSelect;
				}
			},
			fileDownLoad(i) {
				var login = this.checkLogin();
				if (!login) {
					return false;
				}
				var file = this.baseUrl + "" + this.fileList[i].fileUrl;
				// for (var i = 0; i < this.fileList.length; i++) {
				//   if (this.fileList[i].select == true) {
				//     file = this.baseUrl + "" + this.fileList[i].fileUrl;
				//     break;
				//   }
				// }

				if (file.length == 0) {
					uni.showToast({
						title: '请选择文件!',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				uni.showLoading({
					title: '打开中...'
				});
				const downloadTask = uni.downloadFile({
					url: file, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功');
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: function(res) {
									// uni.showToast({
									// 	icon: 'none',
									// 	mask: true,
									// 	title: '文件已保存!', //保存路径
									// 	duration: 3000,
									// });
									setTimeout(() => {
										//打开文档查看
										uni.openDocument({
											filePath: res.savedFilePath,
											success: function(res) {
												console.log('打开文档成功');
											},
											fail(e) {
												console.log(e, "失败");
												uni.showToast({
													icon: 'none',
													title: '文件打开失败！'
												});
											}
										});
									}, 500);
								}
							});
						}
					},
					complete() {
						uni.hideLoading();
					}
				});
				downloadTask.onProgressUpdate((res) => {
					console.log('下载进度' + res.progress);
					console.log('已经下载的数据长度' + res.totalBytesWritten);
					console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
				});
			},

			custom(e) {
				this.pageNum = 1;
				this.fileList = {};
				this.getWindFiles(this.name);
			},
			getWindFiles(name) {
				this.$u.api.getWindFilesList({
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						name: name,
						type: 1, //1:行业标准
					})
					.then(res => {
						for (let i = 0; i < res.rows.length; i++) {
							res.rows[i].select = false;
						}
						this.total = res.total;
						this.totalPages = res.totalPages;
						var resultList = res.rows;
						if (this.pageNum == 1) {
							this.fileList = resultList;
						} else {
							this.fileList = this.fileList.concat(resultList);
						}
					});
			}
		}
	}
</script>
<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.scrool-page {
		display: flex;
		flex-direction: column;
		// width: 100%;
		// height: 100%;
	}

	.flie-header-box {
		flex-shrink: 0; //保持内容不缩放，适用于内容不确定大小时候
		// height:100rpx; //设置高度为100，如果内容确定为这么高的话

		background-color: #3BA2FF;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		align-items: center;
		justify-content: center;

		display: flex;
	}

	.file-list {
		// flex-grow: 1; //充满屏幕
		// height: 100vh; //如果中间不充满屏幕的话，自适应，底部会跟随在中间布局后面
		//overflow: auto;
		background-color: #F7F7F7;
		//margin-bottom: 110rpx; 
	}

	.file-item {
		display: flex;
		margin: 10rpx 15rpx;
		padding: 10rpx 5rpx;
		border-radius: 8rpx;
		background-color: #FFFFFF;
		height: 188rpx;

		.item-radio-left {

			width: 80rpx;
			text-align: center;
			align-items: center;
			line-height: 100rpx;
			display: flex;
			flex-direction: row;
			margin-left: 20rpx;
			justify-content: center;

			.item-radio-active {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50rpx;
				background: #3BA2FF;
				display: inline-block;
				position: relative;
			}

			.item-radio-active:before,
			.item-radio-active::after {
				content: "";
				height: 28rpx;
				width: 4rpx;
				border-radius: 10rpx;
				display: block;
				background: white;
				position: absolute;
				top: 14rpx;
				/*40-6=34*/
				left: 30rpx;
				/*make the two rects in the middle of the cycle */
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
			}

			.item-radio-active::before {
				height: 15rpx;
				transform: rotate(-45deg);
				-ms-transform: rotate(-45deg);
				position: absolute;
				top: 24rpx;
				/*40-18=12  */
				left: 17rpx;
			}

			.item-radio {
				width: 50rpx;
				height: 50rpx;
				border: 1rpx solid #E5E5E5;
				border-radius: 50%;
			}
		}

		.file-item-left {

			margin-left: 5rpx;

			align-items: center;
			text-align: center;
			display: flex;
			justify-content: center;

			.file-pic {
				width: 80rpx;
				height: 80rpx;

			}
		}

		.file-item-right {
			width: 70%;

			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 10rpx;

			.file-name {
				margin-top: 36rpx;
				font-size: 26rpx;
				font-family: PingFang SC;

				height: 80rpx;
				overflow: hidden;
				text-overflow: ellipsis; //文本溢出显示省略号
			}

			.file-createtime {
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #999999;
				margin-bottom: 36rpx;
			}
		}
	}




	.file-bottom {
		color: #fff;
		background-color: #fff;

		line-height: 100rpx;
		flex: 0 0 100rpx;
		/* 不放大不缩小固定100rpx */
		height: 110rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		align-self: flex-end;
		width: 100%;

		.file-bottom-left {
			margin-left: 20rpx;
			text-align: center;
			align-items: center;
			line-height: 100rpx;
			display: flex;
			flex-direction: row;

			.right-text {
				font-size: 30rpx;
				font-family: PingFang SC;
				color: #1A1A1A;
				line-height: 40rpx;
				margin-left: 10rpx;
			}

			.left-radio-active {
				background-color: #DD524D;
				width: 51rpx;
				height: 51rpx;
				background: #3BA2FF;
				border-radius: 50%;

			}

			.left-radio {
				width: 50rpx;
				height: 50rpx;
				border: 1rpx solid #E5E5E5;
				border-radius: 50%;
			}
		}

		.file-bottom-right {
			margin-right: 30rpx;
			background-color: #2d27ff;
			margin-left: auto;
			text-align: center;
			align-items: center;
			line-height: 66rpx;
			width: 172rpx;
			height: 66rpx;
			background: #3BA2FF;
			border-radius: 33rpx;

			font-size: 30rpx;
			font-family: PingFang SC;

			color: #FFFFFF;
		}
	}
</style>
